<template>
  <div>
      <ul class="top_nav">
          <!-- to里面应该写name而不是地址 -->
          <!-- exact 切换到别的路由的时候,激活样式都一直存在的 -->
          
          <li><router-link exact to="/">首页</router-link></li>
          <li><router-link exact to="/topic">榜单</router-link></li>
          <li><img src="../../public/111.png" alt="" class="imgg"></li>
          <li><router-link exact to="/mine">我的</router-link></li>
          <li><router-link exact to="/search">搜索</router-link></li>
      </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.imgg {
    width: 50px;
    /* margin: 0 0 0 -100px; */
    /* float: left; */
    left: 43%;
    top: 0px;
    /* padding: 5px; */
    position:absolute;
    background-color: rgba(147, 57, 57, 0.187);
    border-radius: 50%;
}
.top_nav {
    display: flex;
    background-color: #fff;
    position: fixed;
}
li {
    flex: 1;
    text-align: center;
    padding-top: 10px;
}
li a{
    display: block;
    padding-bottom: 8px;
}
.active {
    border-bottom: 2px solid #ff0000;
}
</style>>